<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-11-21 17:13:52
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-03-22 16:07:40
 * @Description: 
 * 
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
        @clear="clearClick"
        @keyup.enter.native="queryClick"
      />
      <el-button size="medium" type="primary" @click="queryClick"
        >查询</el-button
      >
      <el-button size="medium" @click="resetClick">重置</el-button>
      <el-button
        size="medium"
        style="margin-left: auto"
        type="primary"
        icon="el-icon-plus"
        @click="createClick"
        >创建VPC</el-button
      >
      <el-button
        size="medium"
        :loading="btnLoadingBatchDel"
        type="primary"
        plain
        @click="batchDeleteClick"
        >批量删除</el-button
      >
    </MyHeader>
    <MyMain class="main">
      <el-table
        v-loading="loading"
        class="common-table"
        :data="list"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
        @selection-change="handleSelectionChange"
      >
        <!-- 多选框 -->
        <el-table-column type="selection" width="60" />
        <el-table-column
          prop="id"
          label="VPC ID"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="VPC 名称"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudProvider"
          label="云服务商"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudAccountName"
          label="云账户名称"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="region"
          label="区域"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cidr"
          label="网段"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="desc"
          label="描述"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createBy"
          label="创建人"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column prop="createDate" label="创建时间" width="170" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-popover
              :ref="`popover-delete-${scope.$index}`"
              placement="top"
              width="300"
            >
              <p>是否确认删除该VPC？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    scope._self.$refs[
                      `popover-delete-${scope.$index}`
                    ].doClose()
                  "
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteClick(scope)"
                  >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                type="danger"
                style="height: 22px; line-height: 22px; padding: 0 10px"
                size="mini"
                >删除</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>

    <!--创建-->
    <CreateDialog
      v-if="showCreateDialog"
      :show.sync="showCreateDialog"
      @success="createSuccessCallback"
    />
  </MyContainer>
</template>

<script>
import pagePermissionMixin from "@/views/mixin/pagePermission.js";
import pageQueryMixin from "@/views/mixin/pageQuery.js";
import resSelectorMixin from "@/views/mixin/resSelector.js";
import MyContainer from "@/components/Layout/MyContainer.vue";
import MyHeader from "@/components/Layout/MyHeader.vue";
import MyMain from "@/components/Layout/MyMain.vue";
import {
  getNetworkVPCList,
  deleteNetworkVPC
} from "@/api/cn-resource";
import CreateDialog from './CreateDialog.vue'

export default {
  name: "NetMgmtPublic",
  components: {
    MyContainer,
    MyHeader,
    MyMain,
    CreateDialog
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      menuKey: "NetMgmt",
      selection: [],
      btnLoadingBatchDel: false,
      showCreateDialog: false
    };
  },
  created() {},
  watch: {},
  methods: {
    /**
     * @description: 创建 回调
     * @return {*}
     */
    createSuccessCallback() {
      this.$message.success({
        message: '创建VPC成功！',
        duration: '2000'
      })
      this.pageNum = 1
      this.getList() // 请求数据
    },
    /**
     * @description: 创建
     * @return {*}
     */
    createClick() {
      this.showCreateDialog = true
    },
    /**
     * @description: 选择
     * @param {*} selection
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    /**
     * @description: 批量删除
     * @return {*}
     */
    batchDeleteClick() {
      if (this.selection.length === 0) {
        this.$message.warning("请先选择VPC");
        return;
      }
      const ids = [];
      for (const item of this.selection) {
        ids.push(item.id);
      }
      this.$confirm("是否确认批量删除当前已选中的VPC？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning",
      }).then(() => {
        this.btnLoadingBatchDel = true;
        deleteNetworkVPC({ ids })
          .then((res) => {
            this.selection = [];
            this.$message.success("批量删除成功");
            if (this.list.length === 1) {
              // 当前页只有一条数据时 删除完刷新上一页数据
              this.pageNum = Math.max(this.pageNum - 1, 1);
            }
            this.getList(); // 请求数据
          })
          .finally(() => {
            this.btnLoadingBatchDel = false;
          });
      });
    },
    /**
     * @description: 删除
     * @param {*} row
     * @param {*} index
     * @return {*}
     */
    deleteClick(scope) {
      const row = scope.row;
      deleteNetworkVPC({
        ids: [row.id],
      }).then((res) => {
        scope._self.$refs[`popover-delete-${scope.$index}`].doClose(); // 取消popover
        this.$message.success("删除成功");
        if (this.list.length === 1) {
          // 当前页只有一条数据时 删除完刷新上一页数据
          this.pageNum = Math.max(this.pageNum - 1, 1);
        }
        this.getList(); // 请求数据
      });
    },
    /**
     * @description: 获取列表
     * @return {*}
     */
    getList() {
      this.handleRequestAndResp(getNetworkVPCList, {
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.container {
}
</style>
